<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<title>Share link via email Options</title>

<style type="text/css">
.border
{
	border: 0px solid black;
}
.newLine
{
	width: 135px;
}
th
{
	background-color:#b0c4de;
}
td
{
	background-color:#D6EBFF;
}
</style>

<script type="text/javascript">
<!--

// Saves options to localStorage.
function save_options() {
  for (var i = 0; i <= 4; i++) {
    var child = document.getElementById("mail_picker_"+i);
	localStorage["mail_picker_"+i] = child.checked;
  }
  
  select = document.getElementById("mail_before");
  var mail_before = select.value;
  localStorage["mail_before"] = mail_before;
  
  select = document.getElementById("mail_after");
  var mail_after = select.value;
  localStorage["mail_after"] = mail_after;

  select = document.getElementById("newLineAfter");
  var newLineAfter = select.checked;
  localStorage["newLineAfter"] = newLineAfter;

  select = document.getElementById("newLineAfterNum");
  var newLineAfterNum = select.value;
  localStorage["newLineAfterNum"] = newLineAfterNum;

  select = document.getElementById("newLineBefore");
  var newLineBefore = select.checked;
  localStorage["newLineBefore"] = newLineBefore;

  select = document.getElementById("newLineBeforeNum");
  var newLineBeforeNum = select.value;
  localStorage["newLineBeforeNum"] = newLineBeforeNum;

  // Update status to let user know options were saved.
  var status = document.getElementById("status");
  status.innerHTML = "Options Saved.";
  setTimeout(function() {
    status.innerHTML = "";
  }, 750);
  
  //reload with new settings
  chrome.contextMenus.removeAll();
  chrome.extension.getBackgroundPage().window.location.reload();
}

// Restores saved values from localStorage.
function restore_options() {
  // Restores check box state
  for (var i = 0; i <= 4; i++) {
    var child = localStorage["mail_picker_"+i];
	var select = document.getElementById("mail_picker_"+i);
	if (!child) {
		// set default
		select.checked = true;
	} else {
		if (child == 'true') {
			select.checked = true;
		}
	}
  }
  
  var beforeMsg = localStorage["mail_before"];
  var select = document.getElementById("mail_before");
  select.value = beforeMsg;
  
  var afterMsg = localStorage["mail_after"];
  var select = document.getElementById("mail_after");
  select.value = afterMsg;
  
  var newLineAfter = localStorage["newLineAfter"];
  var select = document.getElementById("newLineAfter");
  if (newLineAfter == 'true') {
	select.checked = true;
  }
  
  var newLineAfterNum = localStorage["newLineAfterNum"];
  var select = document.getElementById("newLineAfterNum");
  select.value = newLineAfterNum;
  
  var newLineBefore = localStorage["newLineBefore"];
  var select = document.getElementById("newLineBefore");
  if (newLineBefore == 'true') {
	select.checked = true;
  }
  
  var newLineBeforeNum = localStorage["newLineBeforeNum"];
  var select = document.getElementById("newLineBeforeNum");
  select.value = newLineBeforeNum;
}

// select/clear all toggle
function changeAll(checkbox) {
	for (var i = 0; i <= 4; i++) {
		var select = document.getElementById("mail_picker_"+i);
		select.checked = checkbox.checked;
  }
}

// select/clear all checker
function changeCheck() {
	var changeChecker = true;
	for (var i = 1; i <= 4; i++) {
		var select = document.getElementById("mail_picker_"+i);
		if (!select.checked) {
			changeChecker = false;
		}
	}
	
	// set All check value
	var select = document.getElementById("mail_picker_0");
	select.checked = changeChecker;
}

// update preview
function getPreview() {
	// update preview text
	var preview = document.getElementById("previewText");
	var startMessage = document.getElementById("mail_before");
	var endMessage = document.getElementById("mail_after");
	var newLineAfter = document.getElementById("newLineAfter").checked;
	var newLineAfterNum = document.getElementById("newLineAfterNum");
	var newLineBefore = document.getElementById("newLineBefore").checked;
	var newLineBeforeNum = document.getElementById("newLineBeforeNum");
	  
	// test if value is set
	function isValueSet(inputName) {
		if (inputName.value) {
			inputName = inputName.value;
		} else {
			inputName = "";
		}
		
		return inputName;
	}	
	
	// use above function
	startMessage = isValueSet(startMessage);
	endMessage = isValueSet(endMessage);
	newLineAfterNum = isValueSet(newLineAfterNum);
	newLineBeforeNum = isValueSet(newLineBeforeNum);
		
	// add new lines
	function addNewLines(varName, lineCount) {
		if (varName) {
			varName = "";
			for (i=0;i<lineCount;i++) {
				varName = varName + "<br/>";
			}
		} else {
			varName = "";
		}
		
		return varName;
	}	
	
	// use above function
	newLineAfter = addNewLines(newLineAfter, newLineAfterNum);
	newLineBefore = addNewLines(newLineBefore, newLineBeforeNum);
	
	// set preview
	preview.innerHTML = startMessage + newLineAfter +" http://www.google.com "+ newLineBefore + endMessage;
}

-->
</script>
</head>

<body onload="restore_options();getPreview();">

<h1>Share link via email - Options</h1>

<div>
	<table class="border">
		<tr>
			<th colspan="2" class="border">
			Email sender selction:
			</th>
		</tr>
		<tr>
			<td>
			<input type="checkbox" id="mail_picker_0" value="all" onchange="changeAll(this)" />
			</td>
			<td class="border">
			All
			</td>
		</tr>
		<tr>
			<td>
			<input type="checkbox" id="mail_picker_1" value="mailto" onchange="changeCheck()" />
			</td>
			<td class="border">
			External
			</td>
		</tr>
		<tr>
			<td>
			<input type="checkbox" id="mail_picker_2" value="Gmail" onchange="changeCheck()" />
			</td>
			<td class="border">
			Gmail
			</td>
		</tr>
		<tr>
			<td>
			<input type="checkbox" id="mail_picker_3" value="Hotmail" onchange="changeCheck()" />
			</td>
			<td class="border">
			Hotmail
			</td>
		</tr>
		<tr>
			<td>
			<input type="checkbox" id="mail_picker_4" value="Ymail" onchange="changeCheck()" />
			</td>
			<td class="border">
			Ymail (Can't use new lines)
			</td>
		</tr>
	</table>
	
	<br/>
</div>

<div>
	<table class="border">
		<tr>
			<th colspan="2" class="border">
			Email sender selction:
			</th>
		</tr>
		<tr>
			<td class="border">
			Before URL message:
			<br/>
			<input type="text" id="mail_before" onkeyup="getPreview()"></input>
			</td>
			<td class="border">
				<table>
					<tr>
						<td class="newLine">
						New line before URL
						</td>
						<td>
						<input type="checkbox" id="newLineAfter" value="newLineAfter" onchange="getPreview()"/>
						<input type="text" id="newLineAfterNum" style="width:15px" value="0" onkeyup="getPreview()"/>
						</td>
					</tr>
				</table> 
			</td>
		</tr>
		<tr>
			<td class="border">
			After URL message:
			<br/>
			<input type="text" id="mail_after" onkeyup="getPreview()"></input>
			</td>
			<td class="border">
				<table>
					<tr>
						<td class="newLine">
						New line after URL 
						</td>
						<td>
						<input type="checkbox" id="newLineBefore" value="newLineBefore" onchange="getPreview()"/>
						<input type="text" id="newLineBeforeNum" style="width:15px" value="0" onkeyup="getPreview()"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	
	<br/>
	
	<table class="border">
		<tr>
			<th class="border">
			Email Body Preview:
			</th>
		</tr>
		<tr>
			<td class="border">
			<span id="previewText"></span>
			</td>
		</tr>
	</table>
</div>

<div>

<br/>
<button onclick="save_options()">Save</button>
<br/>
<span id="status"></span>
</div>

</body>
</html>